<!-- 登录 -->
<template>
	<view class="login-content">
		<image src="/static/img/login/loginlogo.png" style="width: 204rpx;" mode="aspectFit"></image>
		<view class="op_box">

			<!-- #ifdef MP-WEIXIN -->
			<button class='wx-login' hover-class="none" type='primary' open-type="getUserInfo" @click="getUserInfo()">
				微信登录
			</button>
			<!-- #endif -->

			<!--<button class="wx-login" @getphonenumber>-->
			<!--  微信登录-->
			<!--</button>-->
			<view class="phone-login" @click="showPhoneLogin=true">
				账号登录
			</view>
			<checkbox-group class="declaration">
				<checkbox class="de_che" value="cb" checked="true" />
				<view class="sub_tip">登录代表您已同意西部食谷
					<text>用户协议</text>
					和
					<text>隐私政策</text>
				</view>
			</checkbox-group>
		</view>

		<view class="other_iphone" v-show="showPhoneLogin">
			<view class="back-box" @click="showPhoneLogin=false">
				<u-icon name="arrow-left" size="40" style="margin-top: 4rpx"></u-icon>
				返回
			</view>

			<view class="tit">
				账号登录
			</view>
			<view class="login_from">
				<div style="width: 100%;" :model="form" ref="uForm">
					<div class="input-box" border-bottom="true" label="" prop="username">
						<u-input placeholder="请输入食谷账号" v-model="form.username" />
					</div>
					<div class="input-box" border-bottom="true" label="" prop="password">
						<u-input placeholder="请输入密码" v-model="form.password" type="password" />
					</div>
				</div>
				<button class='wx-login' hover-class="none" @click="phLogin" style="margin-top: 100rpx">
					登录
				</button>
			</view>
		</view>
		<view class="band-mask" v-show="bindMask">
			<view class="mask" @click="bindMask=false"></view>
			<!-- 	<view class="band-btn wx-login"  @click="wxLoginFn()">
				微信手机号登录
			</view> -->
			<view class="bind-phone-b">
				<view class="b-t">
					绑定手机号
				</view>
				<view class="b-cen">
					请先允许授权手机号进行操作
				</view>
				<button class='band-btn' hover-class="none" type='primary' open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					<u-icon name="weixin-fill" class="wx_icon" size="50" color="#fff"></u-icon>
					授权手机号
				</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPhoneLogin: false,
				form: {
					username: '',
					password: ''
				},
				wxCode: '',
				encryptedInfo: {
					encryptedData: '',
					iv: ''
				},
				accessToken: '',
				loginging: false,
				bindMask: false,
				wxUserInfo: null,
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 ['change', 'blur']
						trigger: 'blur',
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			};
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		created() {},
		methods: {
			getPhoneNumber(e) {
				console.log("getPhoneNumber",e);
				this.encryptedInfo.iv = e.detail.iv
				this.encryptedInfo.encryptedData = e.detail.encryptedData
				// this.bindMask=true
				uni.login({
					success: (res) => {
						console.log("getLogin", res);
						this.wxCode = res.code
						let userInfo = this.wxUserInfo;
						let wxCode =  res.code;
						this.apis.wxAuth.login({
							code: wxCode,
							rawData: JSON.stringify(userInfo.userInfo),
							signature: userInfo.signature,
							iv: this.encryptedInfo.iv,
							encrypteData: this.encryptedInfo.encryptedData
						}).then(rqres => {
							if (rqres.code === 200 && rqres.data.resultMap.userInfo) {
								let data = rqres.data
								let userAc = {
									userInfo: data.loginUser ? data.loginUser.sysUser :
										null,
									wxInfo: userInfo.userInfo,
									phone: data.resultMap.userInfo.phoneNumber,
									wxBind: data.bind,
									loginType: 'wx'
								}
								console.log("userAc", userAc)
								uni.setStorageSync("userAc", userAc)
								uni.setStorageSync("isLogin", true)
								this.showToast('登录成功',5000)
								uni.navigateTo({
							url: "/pages/home/index"
								})
								// uni.setStorageSync("userInfo", res.data.userInfo)
							}else{
								this.showToast("授权失败，请再次点击尝试")
							}
						})
					},
					fail: (err) => {}
				})

			},
			showBindMask() {

			},
			getUserInfo() {
				// return new Promise((resolve, reject) => {
				// 	uni.getUserProfile({
				// 		lang: 'zh_CN',
				// 		desc: '用户登录',
				// 		success: (res) => {
				// 			console.log("getUserInfo",res);
				// 			resolve(res)
				// 		},
				// 		fail: (err) => {
				// 			reject(err)
				// 		}
				// 	})
				// })
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '用户登录',
					success: (res) => {
						console.log("getUserInfo", res);
						this.wxUserInfo = res
						this.bindMask = true
					},
					fail: (err) => {}
				})
			},
			getLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							console.log("getLogin", res);
							resolve(res.code)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			wxLoginFn() {
				// #ifdef APP-PLUS
				this.weixinLoginByApp()
				// #endif
				// #ifdef MP-WEIXIN
				this.weixinLogin()
				// #endif
			},
			async weixinLogin() {
				let userInfo = this.getUserInfo();
				let wxCode = this.getLogin();
				let js_code = ''
				await Promise.all([userInfo, wxCode]).then((res) => {
					//都获取权限成功
					js_code = res[1]
					this.apis.wxAuth.login({
						code: res[1],
						rawData: JSON.stringify(res[0].userInfo),
						signature: res[0].signature,
						iv: this.encryptedInfo.iv,
						encrypteData: this.encryptedInfo.encryptedData
					}).then(rqres => {
						if (rqres.code === 200) {
							let data = rqres.data
							let userAc = {
								userInfo: data.loginUser ? data.loginUser.sysUser : null,
								wxInfo: res[0].userInfo,
								phone: data.resultMap.userInfo.phoneNumber,
								wxBind: data.bind,
								loginType: 'wx'
							}
							console.log("userAc", userAc)
							uni.setStorageSync("userAc", userAc)
							uni.setStorageSync("isLogin", true)
							this.showToast('登录成功')
							uni.navigateTo({
								url: "/pages/home/index"
							})
							// uni.setStorageSync("userInfo", res.data.userInfo)
						}
					})
				}).catch(err => {
					console.log("获取失败", err)
				})
			},
			phLogin() {
				if (this.form.username != '' && this.form.password != '') {
					this.loginging = true
					//联网加载数据
					this.apis.loginApi.authLogin(this.form).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("isLogin", true)
							this.$store.commit("user/setIsLogin", true)
							let userAc = {
								userInfo: res.data.userInfo,
								wxInfo: '',
								wxBind: true,
								loginType: 'account'
							}
							console.log("userAc", userAc)
							uni.setStorageSync("userAc", userAc)
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								icon: "none",
								title: "登录成功"
							})
							uni.reLaunch({
								url: "/pages/home/index"
							})
						}
						this.loginging = false
					}).catch((err) => {
						uni.showToast({
							icon: "none",
							title: err.data.msg
						})
						this.loginging = false
						//联网失败的回调,隐藏下拉刷新的状态
						// this.mescroll.endErr();
					})

				}
			},
			weixinLoginByApp() {
				let that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							let userInfo = that.getUserInfo();
							let loginRes = that.getLogin();
							Promise.all([userInfo, loginRes]).then((result) => {
								let userInfo = result[0];
								let loginRes = result[1];
								let access_token = loginRes.authResult.access_token;
								let openid = loginRes.authResult.openid;
								let data = Object.assign(loginRes.authResult, userInfo);
								// that.$store.dispatch('Login', {
								// 	type: 'weixin',
								// 	url: that.url,
								// 	data
								// }).then(r => {
								// 	if (r == 'ok') {
								// 		uni.hideLoading()
								// 	}
								// }).catch(err => {
								// 	uni.hideLoading();
								// 	uni.showToast({
								// 		icon: 'none',
								// 		title: err
								// 	})
								// })
							})

						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: err
						})
					}
				})
			}
			//methods end
		}
	}
</script>

<style lang="scss" scoped>
	.login-content {
		width: 100%;
		height: 100vh;
		display: flex;
		background: #FFFFFF;
		align-items: center;
		justify-content: center;
	}

	.wx-login {
		width: 650rpx;
		height: 100rpx;
		margin-bottom: 50rpx;
		background: #44D94B;
		border-radius: 12rpx;
		@include flexCenter();
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		border: none;
	}

	.op_box {
		width: 100vw;
		height: 320rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
		/* window-bottom + 适配 iPhoneX */
		margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));

		.phone-login {
			font-size: 26rpx;
			font-weight: 500;
			color: #32C156;
		}

		.declaration {
			margin-top: 60rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #777777;
			display: flex;
			align-items: center;


		}
	}

	.login_from {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		box-sizing: border-box;
		border-radius: 30rpx;

		.sub_btn {
			box-sizing: border-box;
			padding: 26rpx 250rpx;
			background: #44D94B;
			border-radius: 50rpx;
			color: #FFFFFF;
			opacity: 0.65;
			font-size: 34rpx;
			margin: 80rpx 0 30rpx 0;
		}


		.input-box {
			margin-bottom: 20rpx;

			&:after {
				border-bottom: 1rpx solid #f5f5f5;
			}
		}
	}

	.sub_tip {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;

		text {
			color: #44D94B;
		}
	}

	.other_iphone {
		padding: 50rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #fff;

		.tit {
			margin-top: 72rpx;
			margin-bottom: 70rpx;
			font-size: 52rpx;
			font-weight: 500;
			color: #000000;
		}
	}

	.back-box {
		font-size: 40rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	.band-mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		.mask {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .4);
		}

		.band-btn {
			width: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			.wx_icon {
				padding-top: 4rpx;
				margin-right: 8rpx;
			}
		}

		.b-t {
			font-size: 28rpx;
			font-weight: 600;
		}

		.b-cen {
			margin: 20rpx 0;
			font-size: 24rpx;
			color: #999;
		}

		.bind-phone-b {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 580rpx;
			height: auto;
			padding: 50rpx 0;
			background: #fff;
			border-radius: 12rpx;
		}
	}
</style>
